<template>
	<div class="home">
		<!-- 首页轮播 -->
		<home-swipe :carouselItems="carouselItems"></home-swipe>

		<!-- 首页功能快捷入口 Grid宫格-->
		<home-enter></home-enter>

		<!-- 商品推荐 -->
		<home-product :productItems="recommendedItems" title="商品推荐" icon="gift-o"
			class="product-section"></home-product>

		<!-- 新品上架 -->
		<home-product :productItems="newArrialItems" title="新品上架" icon="vip-card-o"
			class="product-section"></home-product>

		<!-- 销售排行 -->
		<home-product :productItems="topSaleItems" title="销售排行" icon="award-o" class="product-section"></home-product>
	</div>
</template>

<script>
	//导入封装后的首页接口
	import * as HomeAPI from "@/api/home.js";

	import HomeSwipe from "./components/HomeSwipe.vue";
	import HomeEnter from "./components/HomeEnter.vue";
	import HomeProduct from "./components/HomeProduct.vue";

	export default {
		name: "home",
		components: {
			HomeSwipe,
			HomeEnter,
			HomeProduct,
		},

		data() {
			return {
				carouselItems: [], //轮播图
				recommendedItems: [], //商品推荐
				newArrialItems: [], //新品上架
				topSaleItems: [], //销售排行
			};
		},

		// 生命周期钩子-实例创建后,可以用this.*
		created() {
			//2.使用封装后的接口
			HomeAPI.getHomeDataAPI().then((result) => {
				console.log(result); //控制台调式输出
				this.carouselItems = result.data.carouselItems; //保存API调用的返回的轮播数据
				this.recommendedItems = result.data.recommendedItems; //保存首页商品推荐数据
				this.newArrialItems = result.data.newArrialItems; //保存首页新品上架    数据
				this.topSaleItems = result.data.topSaleItems; //保存首页销售排行数据
			});
		},
	};
</script>

<style scoped>
	.home {
		padding: 20px;
		background-color: #f5f5f5;
	}

	/* 轮播图样式 */
	.home-swipe {
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	/* 快捷入口样式 */
	.home-enter {
		margin-bottom: 20px;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
		background-color: #fff;
		padding: 20px;
	}

	/* 商品推荐、新品上架、销售排行公共样式 */
	.product-section {
		margin-bottom: 20px;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
		background-color: #fff;
		padding: 20px;
	}

	/* 商品推荐、新品上架、销售排行标题样式 */
	.product-section van-cell:first-child {
		font-size: 20px;
		color: #333;
		margin-bottom: 10px;
		border-bottom: 1px solid #e0e0e0;
		padding-bottom: 10px;
	}
</style>